<template>
  <BasicDrawer @register="register" v-bind="$attrs" title="物流记录" width="30%">
    <!-- <div :class="['color-#05a390', 'font-bold', 'font-size-20px', 'mb-10px', 'ml-20px']"> 时间轴 </div> -->
    <a-tabs v-model:activeKey="curTab" @change="businessChange">
      <a-tab-pane v-for="(item,index) in shipmentList" :key="item" :tab="'包裹('+(index+1) +')'">
        {{ tabContect }}
      </a-tab-pane>

    </a-tabs>
    <br>
    <br>
    <a-timeline mode="left">
      <a-timeline-item v-for="item in taskFlowList" :label='item.time'>
        <div class="color-#f68052">{{ item.context }}</div>
      </a-timeline-item>
    </a-timeline>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { ref, watchEffect, computed } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import {  list,queryTrack } from '/@/views/xl/customer_shipment/XlCustomerShipment.api';
  import { message } from 'ant-design-vue';


  const shipmentList = ref([])
const curTab = ref();
const tabContect = ref();
  //流程时间轴
  const taskFlowList = ref();

  const businessChange = async (item) => {
    //查询物流
    handleQueryTrack({
        comp: item.deliveryType,           //快递公司
        logisticorder: item.deliveryCode,  //快递单号
        // comp: 'yuantong',           //快递公司
        // logisticorder: 'YT1893720988354',  //快递单号
        phone: '',
      });
  };

  //处理物流数据
  const handleQueryTrack = async (params)=>{
      var res = await queryTrack(params);
      if(!res?.length){
        taskFlowList.value = [];
        message.warning('该发货单暂无快递记录')
        taskFlowList.value = "";
        return false;
      }
      taskFlowList.value = res;
      console.log('taskFlowList',taskFlowList.value);
  }

  const [register, { closeDrawer }] = useDrawerInner(async (data) => {
    //查询该订单下的发货单
    if (!!data.orderCode){
      var res = await list({orderCode: data.orderCode});
      shipmentList.value = res?.records;
      // shipmentList.value = [
      //   {
      //     shipmentCode: 'YT1893720988354',
      //     deliveryType: 'yuantong',
      //     deliveryCode: 'YT1893720988354',
      //   },
      //   {
      //     shipmentCode: 'YT1893737563991',
      //     deliveryType: 'yuantong',
      //     deliveryCode: 'YT1893737563991',
      //   },
      // ]
    }

    //如果有数据
    if(!!shipmentList.value?.length){
      curTab.value = shipmentList.value[0];//默认绑定第一个
      tabContect.value = "物流公司：" + shipmentList.value[0].deliveryType + " 快递单号: " + shipmentList.value[0].deliveryCode;
      //查询物流
      handleQueryTrack({
        comp: shipmentList.value[0].deliveryType,           //快递公司
        logisticorder: shipmentList.value[0].deliveryCode,  //快递单号
        // comp: 'yuantong',           //快递公司
        // logisticorder: 'YT1893720988354',  //快递单号
        phone: '',
      });
    }else{
      taskFlowList.value = [];
      message.warning('该订单暂无发货记录')
    }
  });
</script>
